<template>
  <div class="content">
    <!-- 搜索框 -->
    <div class="input">
      <div>
        <el-input
          v-model="userSearch"
          placeholder="输入姓名查找用户"
          clearable
          @change="searchUser"
          @input="searchUser_change"
          @blur="blur_user"
          @focus="focus_user"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div>
        <div class="search_list" v-if="show_ul">
          <ul>
            <li
              v-for="(item, index) in pre_search"
              :key="index"
              @click="chooseUser(item.username)"
            >
              <div class="icon"><img src="../../icons/搜索.png" alt="" /></div>
              <div>
                <span
                  ><strong>{{ item.username }}</strong></span
                >
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="admin-title">
      <div>用户管理</div>

      <div class="button" style="margin-right: 20px">
        <Transition mode="out-in" name="slide-up">
          <div v-if="showReset == false">
            <el-tabs v-model="activeName" @tab-click="tabshandleClick">
              <el-tab-pane label="所有用户" name="all"></el-tab-pane>
              <el-tab-pane label="管理者" name="admin"></el-tab-pane>
            </el-tabs>
          </div>
          <div v-else-if="showReset == true">
            <el-button type="primary" @click="clear_user" round size="small"
              >重置</el-button
            >
          </div>
        </Transition>
      </div>
    </div>

    <div class="table">
      <el-table :data="tableData" border style="width: 100%" height="250">
        <el-table-column
          prop="shool"
          label="所属部门"
          width="150"
          column-key="date"
          :filters="departmentList"
          :filter-method="filterHandler"
        >
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="emoil" label="邮箱" min-width="180">
        </el-table-column>
        <el-table-column label="是否可查看评分表" width="120">
          <template slot-scope="scope">
            <el-switch
              @change="switchTable(scope.row)"
              v-model="scope.row.certain"
              active-text="是"
              inactive-text="否"
              :active-value="2"
              :inactive-value="1"
              :disabled="
                scope.row.emoil == null ||
                scope.row.username == null ||
                scope.row.shool == null ||
                scope.row.phone == null
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否可填写评分表" width="120">
          <template slot-scope="scope">
            <el-switch
              @change="switchView(scope.row)"
              v-model="scope.row.is_respond"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="0"
              :disabled="
                scope.row.emoil == null ||
                scope.row.username == null ||
                scope.row.shool == null ||
                scope.row.phone == null
              "
              active-color="#3F51B5"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否为管理者" width="120">
          <template slot-scope="scope">
            <el-switch
              @change="switchRole(scope.row)"
              v-model="scope.row.role"
              active-text="是"
              inactive-text="否"
              :active-value="2"
              :inactive-value="1"
              :disabled="
                scope.row.emoil == null ||
                scope.row.username == null ||
                scope.row.shool == null ||
                scope.row.phone == null
              "
              active-color="#673AB7"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="119">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteUser(scope.row.id)"
              >删除</el-button
            >
            <el-dropdown
              trigger="click"
              @command="handleCommand($event, scope.row.openid)"
            >
              <div style="margin-left: 10px">
                <el-button type="text" size="small">更多</el-button>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a"
                  >获取用户唯一标识</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="所属部门">
              <el-input v-model="form.shool"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.emoil"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="(dialogVisible = false), onSubmit('form', form)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- openid二维码 -->
    <div class="openidQR">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose2"
      >
        <div style="display: flex; flex-direction: column; align-items: center">
          <div class="openID" @click="copyOpenid(userOpenId)">
            {{ userOpenId }}
          </div>
          <div id="root" ref="qrCodeUrl" :key="keyCreated"></div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  alluser,
  updateUser,
  deleteUserById,
  partUser,
} from "@/api/userManage";
import { allxueyuan } from "@/api/academic";
import QRCode from "qrcodejs2";
import Clipboard from "clipboard";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      tableData: [],

      // 表单
      form: {
        shool: "",
        phone: "",
        emoil: "",
        username: "",
        role: "",
      },

      form2: "",

      //选项卡
      activeName: "all",

      //部门
      departmentList: [],

      //查找框
      userSearch: "",

      //显示重置按钮
      showReset: false,

      //模糊查询
      pre_search: [],

      //显示模糊查询结果
      show_ul: false,

      //标签页
      tab: {
        name: "",
      },

      //用户openid
      userOpenId: "",

      // QR
      qrcode: null,

      //刷新qr
      keyCreated: 0,
    };
  },
  created() {
    this.init();
  },

  methods: {
    init() {
      this.getUserDate();
      this.getDepartment();
    },

    // 获取用户信息
    getUserDate() {
      alluser().then((res) => {
        this.tableData = res.data;
      });
    },

    //获取部门
    getDepartment() {
      allxueyuan().then((res) => {
        res.data.forEach((element) => {
          let data = {
            value: element.named,
            text: element.named,
          };
          this.departmentList.push(data);
        });
      });
    },

    handleClick(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.form = Object.assign({}, row);
        this.form2 = Object.assign({}, row);
      });
    },

    //关闭
    handleClose(done) {
      if (JSON.stringify(this.form2) === JSON.stringify(this.form)) {
        done();
      } else {
        this.$confirm("您还为提交，确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      }
    },

    //提交表单
    onSubmit(form, data) {
      updateUser(data).then((res) => {
        this.init();
        this.$message({
          type: "success",
          message: "修改成功",
        });
      });
    },

    //删除
    deleteUser(row) {
      let id = {
        id: row,
      };
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteUserById(id).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.init();
            } else {
              this.$message({
                type: "danger",
                message: "发生错误无法删除",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 管理员设置
    switchRole(row) {
      let data = {
        id: row.id,
        role: row.role,
      };
      updateUser(data).then((res) => {
        // this.init();
      });
    },

    //填写评分表
    switchView(row) {
      let data = {
        id: row.id,
        is_respond: row.is_respond,
      };
      updateUser(data).then((res) => {
        // this.init();
      });
    },

    //查看评分表
    switchTable(row) {
      let data = {
        id: row.id,
        certain: row.certain,
      };
      updateUser(data).then((res) => {
        // this.init();
      });
    },

    //点击标签页
    tabshandleClick(tab, event) {
      this.tab.name = tab.name;
      if (tab.name == "all") {
        alluser().then((res) => {
          this.tableData = res.data;
        });
      } else {
        partUser().then((res) => {
          this.tableData = res.data;
        });
      }
    },

    // 筛选
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },

    //查找用户
    searchUser(value) {
      let userKey = {
        key: value,
      };
      alluser(userKey).then((res) => {
        this.tableData = res.data;
      });
      this.showReset = true;
    },

    //模糊查询
    searchUser_change(value) {
      let userKey = {
        key: value,
      };
      alluser(userKey).then((res) => {
        if (res.data.length > 0) {
          this.show_ul = true;
          if (res.data.length > 6) {
            this.pre_search = res.data.slice(0, 6);
          } else {
            this.pre_search = res.data;
          }
        }
      });
    },

    //选择用户
    chooseUser(name) {
      let userKey = {
        key: name,
      };
      this.userSearch = name;
      alluser(userKey).then((res) => {
        this.tableData = res.data;
      });
    },

    //失去焦点
    blur_user() {
      setTimeout(() => {
        this.show_ul = false;
      }, 500);
    },

    //获取焦点
    focus_user(val) {
      let userKey = {
        key: this.userSearch,
      };
      alluser(userKey).then((res) => {
        if (res.data.length > 0) {
          this.show_ul = true;
          if (res.data.length > 6) {
            this.pre_search = res.data.slice(0, 6);
          } else {
            this.pre_search = res.data;
          }
        }
      });
    },

    //清除查询结果
    clear_user() {
      this.userSearch = "";
      this.show_ul = false;
      this.showReset = !this.showReset;
      if (this.tab.name == "all") {
        alluser().then((res) => {
          this.tableData = res.data;
        });
      } else {
        partUser().then((res) => {
          this.tableData = res.data;
        });
      }
    },

    //更多操作
    handleCommand(command, openid) {
      this.userOpenId = openid;
      if (command == "a") {
        this.dialogVisible2 = true;
        this.$nextTick(() => {
          this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: openid, // 需要转换为二维码的内容
            width: 200,
            height: 200,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
          });
        });
      }
    },

    //更多操作
    handleClose2(done) {
      // this.qrcode.clear();
      // this.keyCreated++;
      this.$refs.qrCodeUrl.innerHTML = "";
      done();
    },

    //复制openid
    copyOpenid(data) {
      let clipboard = new Clipboard(".copy");
      clipboard.on("success", (e) => {
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });

      return;

      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 84px);
  width: 100%;
  padding: 20px 20px 10px 20px;
  position: relative;
  min-width: 950px;

  .input {
    position: absolute;
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, 0.18);
    border-left: 1px solid transparent;
    border-right: none;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    overflow: hidden;
    width: 500px;
    z-index: 666;
    top: 25px;
    left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);

    .search_list {
      // position: absolute;
      border-top: 1px solid #dbdbdb;
      background-color: #ffffff;
      left: 50%;

      ul {
        padding: 0;
        margin: 0;

        li {
          list-style-type: none;
          display: flex;
          cursor: pointer;

          .icon {
            width: 36px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              display: block;
              height: 18px;
              width: 18px;
            }
          }

          span {
            line-height: 36px;
          }
        }
      }
    }

    ::v-deep .el-input__inner {
      border: 1px solid #ffffff;
    }
  }

  .admin-title {
    width: 100%;
    height: 70px;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, rgb(247, 0, 0) 0%, #00afed 100%) 2 2 2
      2;
    //   #8f41e9, #578aef
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .button {
      .slide-up-enter-active,
      .slide-up-leave-active {
        transition: all 0.25s ease-out;
      }

      .slide-up-enter-from {
        opacity: 0;
        transform: translateY(30px);
      }

      .slide-up-leave-to {
        opacity: 0;
        transform: translateY(-30px);
      }
    }
  }

  .table {
    height: calc(100vh - 184px);
    // background-color: firebrick;
    padding-top: 15px;
    border-right: 2px solid;
    border-image: linear-gradient(
        -180deg,
        #00bbf2 0%,
        rgba(255, 255, 255, 0) 99%
      )
      2 2 2 2;

    ::v-deep .el-table {
      height: calc(100vh - 199px) !important;
    }
  }

  .openidQR {
    ::v-deep .el-dialog {
      min-width: 400px;
      .openID {
        height: 35px;
        font-size: 16px;
        font-weight: 700;
        line-height: 29px;
        padding: 0 10px 0 10px;
        background: #cfe6ff6e;
        border: 3px dashed #409eff;
        color: #000;
        border-radius: 8px;
        margin-bottom: 25px;
        cursor: pointer;
      }
    }
  }
}
</style>
